<template>
	<ul class="navigator">
		<el-popover
			placement="bottom-start"
			:width="200"
			trigger="hover"
			v-for="(item, index) in menuList"
			:key="index"
			:effect="popoverEffect"
			:disabled="!navigatorVisible || !item.children.length"
			:show-after="200"
			:popper-class="$style['el-popover-silde']"
		>
			<template #reference>
				<li
					:class="[
						'link',
						{
							active: nowCurrent === index,
						},
					]"
					:title="item.title"
					@click="onChangeMenu(item, index)"
				>
					<v-icon class="icon" :name="item.icon" :size="20"></v-icon>
					{{ item.title }}
				</li>
			</template>
			<template v-if="item.children.length">
				<v-menu type="popover" :list="item.children"></v-menu>
			</template>
		</el-popover>
	</ul>
</template>

<script setup>
import { useMenu } from "../modules/menu"
import { useTheme } from "../modules/theme"
import VMenu from "../../menu/index.vue"
const { navigatorVisible, popoverEffect } = useTheme()
const { menuList, nowCurrent, onChangeMenu } = useMenu(navigatorVisible)
</script>

<style lang="scss" scoped>
.navigator {
	margin-left: 20px;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	font-size: 12px;
	white-space: nowrap;
	width: 100%;
	.link {
		display: inline-block;
		cursor: pointer;
		position: relative;
		width: 80px;
		height: 100%;
		line-height: 1;
		z-index: 1;
		white-space: nowrap;
		overflow: hidden;
		box-sizing: border-box;
		text-align: center;
		padding-top: 18px;
		padding-left: 5px;
		padding-right: 5px;
		box-sizing: border-box;
		.icon {
			margin: auto;
			margin-bottom: 10px;
			display: block;
		}
		&:not(:last-child) {
			margin-right: 10px;
		}
		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			border-radius: 5px;
			width: 100%;
			height: 60px;
			background: var(--first-nav-active-color);
			z-index: -1;
			opacity: 0;
			transition: var(--transition);
		}
		&::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			width: 0;
			height: 0;
			margin: auto;
			border-bottom: 5px solid var(--content-background);
			border-left: 5px solid transparent;
			border-right: 5px solid transparent;
			opacity: 0;
			transition: var(--transition);
		}
		&:hover {
			&::before {
				opacity: 1;
			}
		}
		&.active {
			&::before {
				opacity: 1;
			}
			&::after {
				opacity: 1;
			}
		}
	}
}
</style>

<style lang="scss" module>
.el-popover-silde {
	padding: 5px 0 !important;
}
</style>
